<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>精灵图</title>
	
	<style>
		
		#d71,#d72,#d73{
			width: 50px; height: 50px; margin: 20px;
			border: 2px solid #f00;
			background: url("img/sprite.png") no-repeat;
		}
		#d71{
			background-position: 10px -42px;
		}
		#d72{
			background-position: -44px -145px;
		}
		#d73{
			background-position: -150px -42px;
		}
	</style>
</head>
<body>

	<p>精灵图</p>
	<div class="div_content">
		使用: 把许多小图标,集中到一张大图片中 <br>
		使用css设置背景图的方式,改变背景图的大小和位置 <br>
		让元素只显示大图片中的某一个小图标 <br>
		除了加载第一张小图片的时候, 需要发送请求 <br>
		其他图标都可以使用第一次加载之后,生成的缓存, 不需要发送请求了 <br>
		<div id="d71"></div>
		<div id="d72"></div>
		<div id="d73"></div>
	</div>



<br><br><br><br><br><br><br><br>

</body>
</html>